<template>
  <div class="layout">
    <el-container class="container">
      <!-- 头部区域 -->
      <el-header class="header">
        <div class="header-title">EasyBlog</div>
        <div class="header-user">
          <div>欢迎回来,</div>
          <el-dropdown class="header-user-info">
            <span>
              {{ userInfo.nickName }}
              <el-icon>
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goUserInfo"
                  >个人信息</el-dropdown-item
                >
                <el-dropdown-item @click="quitLogin">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-image
            class="header-user-avatar"
            style="width: 50px; height: 50px"
            :src="userInfo.avatar"
            fit="fill"
            @click="goUserInfo"
          />
        </div>
      </el-header>
      <!-- 主体区域 -->
      <el-container class="container">
        <!-- 导航菜单 -->
        <el-aside class="aside">
          <!-- 发布按钮 -->
          <el-button class="publish" type="success" @click="createHtml"
            >发布</el-button
          >
          <!-- 菜单 -->
          <el-menu
            class="menu"
            unique-opened
            router
            :default-active="activeIndex"
          >
            <!-- 一级菜单 -->
            <el-sub-menu
              v-for="item in menuList"
              :key="item.index"
              :index="item.index"
            >
              <template #title>
                <component :is="item.icon" style="width: 18px; height: 18px" />
                <span>&nbsp;{{ item.title }}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item
                v-for="subItem in item.children"
                :key="subItem.inde"
                :index="subItem.path"
                @click="activeNavMenu(subItem.path)"
              >
                {{ subItem.title }}
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main class="main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>

  <!-- 发布进度条 -->
  <el-dialog
    v-model="progressDialog.show"
    :title="progressDialog.title"
    width="400px"
    :show-close="false"
  >
    <div class="progress-container">
      <div class="progress-panel">
        <el-progress type="circle" :percentage="progressInfo.progress" :status="progressInfo.status" :color="colors" />
      </div>
      <div class="error" v-if="progressInfo.result==0">
        <div>发布出错:{{ progressInfo.errorMsg }}</div>
      </div>
      <div class="success" v-if="progressInfo.progress==100 && progressInfo.result==1">
        发布成功
      </div>
      <div class="btn-panel">
        <el-button v-if="progressInfo.progress==100 || progressInfo.result==0" type="primary" @click="progressDialog.show = false">
          关闭
        </el-button>
      </div>
    </div>
    
  </el-dialog>
</template>

<script setup>
import {
  reactive,
  onBeforeMount,
  getCurrentInstance,
  ref,
  onMounted,
} from "vue";
import VueCookies from "vue-cookies";
import bus from "../utils/EventBus";
import { useRouter } from "vue-router";

const { proxy } = getCurrentInstance();
const router = useRouter();

onBeforeMount(() => {
  getUserInfo();
});

onMounted(() => {
  bus.on("updateInfo", () => {
    getUserInfo();
  });
});

// 菜单列表
const menuList = reactive([
  {
    title: "博客",
    icon: "Notebook",
    index: "1",
    children: [
      {
        title: "博客管理",
        path: "/blog/list",
        index: "1-1",
      },
      {
        title: "分类管理",
        path: "/blog/category",
        index: "1-2",
      },
    ],
  },
  {
    title: "专题",
    icon: "Menu",
    index: "2",
    children: [
      {
        title: "专题管理",
        path: "/special/list",
        index: "2-1",
      },
    ],
  },
  {
    title: "设置",
    icon: "Setting",
    index: "3",
    children: [
      {
        title: "个人信息",
        path: "/setting/myInfo",
        index: "3-1",
      },
      {
        title: "博客成员",
        path: "/setting/users",
        index: "3-2",
      },
      {
        title: "系统设置",
        path: "/setting/systemSetting",
        index: "3-3",
      },
    ],
  },
  {
    title: "回收站",
    icon: "Delete",
    index: "4",
    children: [
      {
        title: "回收站",
        path: "/recovery/list",
        index: "4-1",
      },
    ],
  },
]);
// 用户信息
let userInfo = ref({
  nickName: "",
  avatar: "",
  roleType: null,
  userId: null,
});
// 获取用户信息
const getUserInfo = async () => {
  let result = await proxy.Request({
    url: "/getUserInfo",
  });
  userInfo.value = result.data;
  userInfo.value.avatar = proxy.imageUrl + userInfo.value.avatar;
};

// 激活菜单显示
let activeIndex = ref(
  window.sessionStorage.getItem("index")
    ? window.sessionStorage.getItem("index")
    : "/blog/list"
);
const activeNavMenu = (activedIndex) => {
  window.sessionStorage.setItem("index", activedIndex);
  activeIndex.value = activedIndex;
};

// 跳转个人信息
const goUserInfo = () => {
  activeIndex.value = "/setting/myInfo";
  window.sessionStorage.setItem("index", "/setting/myInfo");
  router.push("../setting/myInfo");
};

// 退出登录
const quitLogin = async () => {
  let result = await proxy.Request({ url: "/logout" });
  if (result.code !== 200) {
    proxy.$message({
      message: "退出失败",
      type: "error",
    });
  } else {
    proxy.$message({
      message: "退出成功",
      type: "success",
    });

    setTimeout(() => {
      router.push("/login");
    }, 1500);

    window.sessionStorage.clear();
  }
};

// 发布进度条颜色
const colors = [
  { color: "#f56c6c", percentage: 20 },
  { color: "#e6a23c", percentage: 40 },
  { color: "#6f7ad3", percentage: 60 },
  { color: "#1989fa", percentage: 80 },
  { color: "#5cb87a", percentage: 100 },
];
// 进度
const progressDialog = reactive({
  title: "发布",
  show: false,
});
// 进度信息
const progressInfo = reactive({
  progress: 0,
  status: undefined,
});

let checkTimer = null;

// 发布
const createHtml = async () => {
  progressDialog.show = true;
  progressInfo.progress = 0;
  progressInfo.status = undefined;
  let result = await proxy.Request({
    url: "/createHtml",
  });
  if (!result) {
    return;
  }
  checkProgress();
  checkTimer = setInterval(() => {
    checkProgress();
  }, 500);
};

// 查询进度
const checkProgress = async () => {
  let result = await proxy.Request({
    url: "/checkProgress",
  });
  if (!result) {
    return;
  }
  if (result.data.result == 0) {
    progressInfo.status = "exception";
    progressInfo.errorMsg = result.data.errorMsg;
  } else {
    progressInfo.progress = result.data.progress;
  }
  progressInfo.result = result.data.result;
  if (
    (result.data.progress == 100 || result.data.result == 0) &&
    checkTimer != null
  ) {
    clearInterval(checkTimer);
  }
};
</script>

<style lang="scss" scoped>
.layout {
  padding: 20px;
  background-color: rgb(238, 235, 235);
  min-height: 500px;

  .container {
    min-height: 460px;

    .header {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      border-radius: 20px;
      background-color: #fff;

      .header-title {
        width: 200px;
        box-sizing: border-box;
        line-height: 60px;
        font-size: 30px;
        text-align: center;
      }

      .header-user {
        display: flex;
        justify-content: flex-end;
        line-height: 60px;

        .header-user-info {
          margin-right: 20px;
          display: flex;
          align-items: center;
          font-size: 15px;
          cursor: pointer;
          color: #337ecc;
        }

        .header-user-avatar {
          top: 5px;
          border-radius: 50%;
          cursor: pointer;
        }
      }
    }
    .container {
      margin-top: 20px;
      background-color: rgb(238, 235, 235);
      height: calc(100vh - 120px);

      .aside {
        width: 250px;

        .publish {
          margin-left: 5%;
          width: 90%;
          height: 35px;
        }

        .menu {
          top: 20px;
          height: calc(100vh - 175px);

          span {
            font-size: 20px;
          }

          el-menu-item {
            background-color: rgb(238, 235, 235);
          }
        }
      }
    }

    .main {
      background-color: #fff;
      min-height: 500px;
    }
  }
}
// 发布进度样式
.progress-container{
  .progress-panel{
    display: flex;
    justify-content: center;
  }

  .error{
    color: red;
    margin-top: 20px;

    .info{
      font-size: 13px;
    }
  }

  .success{
    margin-top: 20px;
    text-align: center;
    font-size: 16px;
    color: green;
  }

  .btn-panel{
    text-align: center;
    margin-top: 20px;

    .btn{
      margin: 0 auto;
    }
  }
}
</style>